input,
textarea,
button {
  font-family: inherit;
}

/* 隐藏滚动条 */
.hidden-scrollbar {
  overflow: hidden auto;
  -ms-overflow-style: none;

  /* IE 10+ */
  scrollbar-width: none;

  /* Firefox */

  &::-webkit-scrollbar {
    display: none;

    /* Chrome, Safari */
  }
}

/* 骨架屏加载动画 */
.skeletons {
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, hsl(210deg 15% 88%), hsl(210deg 15% 95%), hsl(210deg 15% 88%));
  background-size: 200%;
  opacity: 0.6;
  animation: loader 1s infinite reverse;
}

.lew-dark .skeletons {
  background: linear-gradient(90deg, hsl(240deg 14% 15%), hsl(240deg 16% 20%), hsl(240deg 15% 15%));
  background-size: 200%;
}

@keyframes loader {
  from {
    background-position: -100% 0;
  }

  to {
    background-position: 100% 0;
  }
}

/* 自定义滚动条样式 */
.lew-scrollbar {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: var(--lew-bgcolor-2);
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: var(--lew-bgcolor-4);
    border-radius: 4px;

    &:hover {
      background-color: var(--lew-bgcolor-6);
    }
  }

  &::-webkit-scrollbar-corner {
    background-color: var(--lew-bgcolor-0);
  }

  .scrollbar-corner {
    background-color: var(--lew-bgcolor-0);
  }
}

/* 悬停显示滚动条 */
.lew-scrollbar-hover {
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: transparent;
    border-radius: 4px;
  }

  &:hover {
    &::-webkit-scrollbar {
      background-color: var(--lew-bgcolor-2);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background-color: var(--lew-bgcolor-4);
      border-radius: 4px;
      
      &:hover {
        background-color: var(--lew-bgcolor-6);
      }
    }

    &::-webkit-scrollbar-corner {
      background-color: var(--lew-bgcolor-0);
    }

    .scrollbar-corner {
      background-color: var(--lew-bgcolor-0);
    }
  }
}

/* 表单图标动画 */
.lew-form-icon-ani-enter-from,
.lew-form-icon-ani-leave-to {
  margin-right: -10px;
  opacity: 0 !important;
}

.lew-form-icon-ani-enter-active,
.lew-form-icon-ani-leave-active {
  transition: all var(--lew-form-transition-bezier);
}

/* 表单清除图标 */
.lew-form-icon-close {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 9;
  padding: 2px;
  border-radius: 50%;
  transform: translate(0, -50%);
  cursor: pointer;
  opacity: var(--lew-form-icon-opacity);
  transition: all 0.2s;

  &:hover {
    background-color: var(--lew-bgcolor-0);
    opacity: var(--lew-form-icon-opacity-hover);
  }

  &:active {
    opacity: var(--lew-form-icon-opacity-active);
  }
}

.lew-form-icon-close-focus {
  &:hover {
    background-color: var(--lew-bgcolor-4);
    opacity: var(--lew-form-icon-opacity-hover);
  }

  &:active {
    opacity: var(--lew-form-icon-opacity-active);
  }
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
